<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>更改 HTML 元素的内容为属性值同名 JavaScript 标识符的值</title>
</head>

<body>
    <div id="change" class="change">
        <h1 data-text="text" style="background-color: red">Hello, World!</h1>
        <h1 data-text="text" style="background-color: green">Hello, World!</h1>
    </div>

    <script>
        let text = "Hello, Vue!"
        /*
        // step1. 获取目标元素
        let element = document.querySelector("#change > h1")
        console.log(element);

        // step2. 获取目标元素属性的值
        let attributeValue = element.getAttribute("data-text")
        console.log(attributeValue);

        //  step3. 更新元素的内容
        element.textContent = eval(attributeValue)

        // step4. 删除目标元素多余的属性
        element.removeAttribute("data-text")
        */

        // 获取所有匹配的元素   
        let elements = document.querySelectorAll("#change > h1")
        console.log(elements);

        for (let index = 0; index < elements.length; index++) {
            const element = elements[index];
            console.log(element);

            // step2. 获取目标元素属性的值
            let attributeValue = element.getAttribute("data-text")
            console.log(attributeValue);

            //  step3. 更新元素的内容
            element.textContent = eval(attributeValue)

            // step4. 删除目标元素多余的属性
            element.removeAttribute("data-text")
        }
    </script>
</body>

</html>